<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="my.css">
    <script type="text/javascript" src="./tools.js"></script>
    <script type="text/javascript" src="base.js"></script>
    <script type="text/javascript" src="base_drag.js"></script>
    <script type="text/javascript" src="demo.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="header">
        <div class="logo">
            <img src="./images/logo.gif" alt=""/>
        </div>
        <div class="member">
            个人中心
            <ul class="member_ul">
                <li><a href="###">设置</a></li>
                <li><a href="###">换肤</a></li>
                <li><a href="###">帮助</a></li>
                <li><a href="###">退出</a></li>
            </ul>
        </div>
        <div class="reg">注册</div>
        <div class="login">登录</div>
    </div>
    <div id="screen"></div>
    <!-- https://ftp.mozilla.org/pub/firefox/ 旧版火狐浏览器下载地址 这里的火狐旧版浏览器bug已经无法复现了 -->

    <div id="reg">
        <h2><img src="images/close.png" alt="" class="close">会员注册</h2>
        <form action="#" name="reg">
        <dl>
            <dd>用 户 名： <input type="text" name="user" class="text">
                <span class="info info_user">请输入用户名，2-20位，由字母、数字和下划线组成！</span>
                <span class="error error_user">输入不正确，请重新输入！</span>
                <span class="succ succ_user">可用！</span>
            </dd>
            <dd>密　　码：<input type="password" name="pass" class="text">
                <span class="info info_pass">
                    <p>安全级别：
                        <strong class="s s1">■</strong>
                        <strong class="s s2">■</strong>
                        <strong class="s s3">■</strong>
                        <strong class="s s4" style="font-weight: normal;"><!-- 低 --></strong>
                    </p>
                    <p><strong class="q1" style="font-weight: normal;">●</strong> 6-20个字符</p>
                    <p><strong class="q2" style="font-weight: normal;">●</strong> 只能包含大小写字母、数字和非空格字符</p>
                    <p><strong class="q3" style="font-weight: normal;">●</strong> 大、小写字母、数字、非空字符，2种以上</p>
                </span>
                <span class="error error_pass">输入不正确，请重新输入！</span>
                <span class="succ succ_pass">可用！</span>
            </dd>
            <dd>确认密码：<input type="password" name="notpass" class="text">
                <span class="info info_notpass">请输入再一次密码！</span>
                <span class="error error_notpass">密码不一致，请重新输入！</span>
                <span class="succ succ_notpass">可用！</span>
            </dd>
            <dd><span style="vertical-align: -2px;">提　　问：</span>
                <select name="ques">
                    <option value="0">---- 请选择 ----</option>
                    <option value="1">-- 你喜欢吃的菜</option>
                    <option value="2">-- 你的狗狗的名字</option>
                    <option value="3">-- 你的出生地</option>
                    <option value="4">-- 你最喜欢的男明星</option>
                </select>
                <span class="error error_ques">尚未选择提问，请选择！</span>
            </dd>
            <dd>回　　答：<input type="text" name="ans" class="text">
                <span class="info info_ans">请输入回答，2~32位！</span>
                <span class="error error_ans">回答不合法，请重新输入！</span>
                <span class="succ succ_ans">可用！</span>
            </dd>
            <dd>电子邮件：<input type="text" class="text" name="email" autocomplete="off">
                <span class="info info_email">请输入电子邮件！</span>
                <span class="error error_email">电子邮件不合法，请重新输入！</span>
                <span class="succ succ_email">可用！</span>
                <ul class="all_email">
                    <li><span></span>@qq.com</li>
                    <li><span></span>@163.com</li>
                    <li><span></span>@sohu.com</li>
                    <li><span></span>@sina.com.cn</li>
                    <li><span></span>@gmail.com</li>
                </ul>
            </dd>
            <dd class="birthday"><span style="vertical-align: -2px;">生　　日：</span>
                <select name="year">
                    <option value="0">- 年 -</option>
                </select>年
                <select name="month">
                    <option value="0">- 月 -</option>
                </select>月
                <select name="day">
                    <option value="0">- 日 -</option>
                </select>日
                <span class="error error_birthday">尚未全部选择，请选择！</span>
            </dd>
            <!-- style 把 还能输入200字 挤下去  -->
            <dd style="height: 105px;"><span style="vertical-align: 85px;">备　　注：</span><textarea name="ps"></textarea></dd>
            <dd style="display: block;" class="ps";>还能输入<strong class="num">200</strong>字</dd style="padding:0 0 0 320px;">
            <dd style="display: none;" class="ps";>已超过<strong class="num">35</strong>字，<span class="clear">清尾</span></dd style="padding:0 0 0 320px;">
            <dd style="padding:0 0 0 80px;"><input type="button" name="sub" class="submit"></dd style="padding:0 0 0 320px;">
        </dl>
        </form>
    </div>

    <div id="login">
        <h2><img class="close" src="./images/close.png" alt=""> 网站登录</h2>
        <div class="user">账 号: <input type="text" name="user" class="text"></div>
        <div class="pass">密 码: <input type="password" name="pass" class="text"></div>
        <div class="button"><input class="submit" type="button" value=""></div>
        <div class="other"> <span> 注册新用户 | 忘记密码？</span></div>
    </div>
    <div id="nav">
        <ul class="about">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="black">
            <li>首页</li>
            <li>博文列表</li>
            <li>精彩相册</li>
            <li>动感音乐</li>
            <li>关于我</li>
        </ul>
        <div class="nav_bg">
            <ul class="white">
                <li>首页</li>
                <li>博文列表</li>
                <li>精彩相册</li>
                <li>动感音乐</li>
                <li>关于我</li>
            </ul>
        </div>
    </div>

    <div id="main">
        <div id="sidebar">
            <h2>教育新闻1</h2>
            <ul>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
            </ul>
            <h2>教育新闻2</h2>
            <ul>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
            </ul>
            <h2>教育新闻3</h2>
            <ul>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
                <li><a href="###">12打的费第三方士大夫士大</a></li>
            </ul>
        </div>
        <div id="index">index</div>
        <div id="banner">
            <img src="./images/banner1.jpg" alt="轮播器第一张图">
            <img src="./images/banner2.jpg" alt="轮播器第二张图">
            <img src="./images/banner3.jpg" alt="轮播器第三张图">
            <ul>
                <li class="banner1">●</li>
                <li class="banner2">●</li>
                <li class="banner3">●</li>
            </ul>
            <span></span>
            <strong></strong>
        </div>
        <div id="photo">
            <dl>
                <dt><img xsrc="images/p1.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>1</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p2.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>2</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p3.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>3</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p4.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>4</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p5.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>5</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p6.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>6</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p7.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>7</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p8.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>8</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p9.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>9</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p10.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>10</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p11.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>11</dd>
            </dl>
            <dl>
                <dt><img xsrc="images/p12.jpg" src="images/wait_load.jpg" class="wait_load"/></dt>
                <dd>12</dd>
            </dl>
        </div>
    </div>

    <div id="share">
        <h2>分享到</h2>
        <ul>
            <li><a href="###" class="a">一键分享</a></li>
            <li><a href="###" class="b">新浪微博</a></li>
            <li><a href="###" class="c">人人网</a></li>
            <li><a href="###" class="d">百度相册</a></li>
            <li><a href="###" class="e">腾讯朋友</a></li>
            <li><a href="###" class="f">豆瓣网</a></li>
            <li><a href="###" class="g">百度新首页</a></li>
            <li><a href="###" class="h">和讯微博</a></li>
            <li><a href="###" class="i">QQ空间</a></li>
            <li><a href="###" class="j">百度搜藏</a></li>
            <li><a href="###" class="k">腾讯微博</a></li>
            <li><a href="###" class="l">开心网</a></li>
            <li><a href="###" class="m">百度贴吧</a></li>
            <li><a href="###" class="n">搜狐微博</a></li>
            <li><a href="###" class="o">QQ好友</a></li>
            <li><a href="###" class="p">更多...</a></li>
        </ul>
        <div class="share_footer"><a href="###">百度分享</a><span></span></div>
    </div>

    <div id="test" style="clear: both;"></div>

    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>

</body>
</html>